<template>
    <view class="page-box">
        <view class="log-search row verCenter bothSide">
            <view class="logo row">
                <image src="@/static/logo.png" mode="aspectFill"></image>
            </view>
            <template v-if="is_show">
                <text class="iconfont icon-icon_cuowu" @click="is_show=false"></text>
            </template>
            <template v-else>
                <text class="iconfont icon-a-tubiaochangyongsousuo" @click="is_show=true"></text>
            </template>
        </view>
        <header class="header">
            <view class="search row">
                <view class="search-wrap row bothSide verCenter" v-if="is_show">
                    <input type="text" placeholder="搜索产品名称/关键字" class="uni-input" placeholder-style="color:#6E767A" @input="handleInput" v-model="searchParams.product_name" />
                    <text class="iconfont icon-a-tubiaochangyongsousuo"></text>
                </view>
            </view>
            <cx-screen :list="filterlist" @screeChange="handleSelect"></cx-screen>
        </header>
        <!-- 列表 -->
        <view class="list" :class="{mt:is_show}">
            <scroll-view scroll-y="true" :style="{ height: is_show ? 'calc(100vh - 380rpx)' : 'calc(100vh - 310rpx)' }" @scrolltolower="lower">
                <view class="box" v-for="(item,index) in list" :key="index">
                    <view class="top row verCenter">
                        <view class="pic row verCenter">
                            <image :src="item.logo" mode="aspectFill"></image>
                        </view>
                        <view class="wrap column">
                            <text class="t1">{{item.product_name}}</text>
                            <text class="t2">佣金比例：{{item.product_commission }}</text>
                        </view>
                    </view>
                    <view class="info row bothSide verCenter">
                        <view class="info-bar column rowCenter verCenter" style="width: 264rpx;">
                            <text class="t1" style="margin-bottom: 4rpx;">{{item.product_quota}}万</text>
                            <text class="t2">最高额度</text>
                        </view>
                        <view class="info-bar column" style="width: calc(100% - 264rpx);padding-left: 59rpx;">
                            <view class="row verCenter" style="margin-bottom: 8rpx;">
                                <text class="t3">年化利率：</text>
                                <text class="t4">
                                    <template v-if="item.annual_profit_rate_min && item.annual_profit_rate_max">
                                        <template v-if="item.annual_profit_rate_min === item.annual_profit_rate_max">
                                            {{item.annual_profit_rate_min}}%
                                        </template>
                                        <template v-else>
                                            {{item.annual_profit_rate_min}}-{{item.annual_profit_rate_max}}%
                                        </template>
                                    </template>
                                    <template v-else-if="item.annual_profit_rate_min">
                                        {{item.annual_profit_rate_min}}%
                                    </template>
                                    <template v-else-if="item.annual_profit_rate_max">
                                        {{item.annual_profit_rate_max}}%
                                    </template>
                                </text>
                            </view>
                            <view class="row verCenter">
                                <text class="t3">还款期限：</text>
                                <text class="t4">{{item.loan_cycle}}期</text>
                            </view>
                        </view>
                    </view>
                    <view class="label-box column rowCenter">
                        <view class="label-bar row verCenter" v-for="(v,i) in item.product_advantages" :key="i">
                            <image src="../../static/gou.png" mode="aspectFill"></image>
                            <text>{{v}}</text>
                        </view>
                    </view>
                    <view class="btn-box row bothSide verCenter">
                        <navigator class="btn1 row rowCenter verCenter" hover-class="none" :url="'/pages/product/detail?id='+item.id">查看详情</navigator>
                        <navigator class="btn2 row rowCenter verCenter" @click="enterImmediately(item.id)">立即进件</navigator>
                    </view>
                </view>
            </scroll-view>
        </view>
        <!--产品筛选-->
        <uni-popup ref="popup" background-color="#ffffff" border-radius="0 0 10rpx 10rpx">
            <view class="popup-content">
                <view class="loan-down row verCenter">
                    <view class="box row rowCenter verCenter" v-for="(item,index) in array" :key="index" :class="{curr:index==curr}" @click="tab(index)">{{item}}</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>


<script>
    import { API } from '@/util/api.js';
    import debounce from 'lodash/debounce';
    export default {
        data() {
            return {
                is_show: false,
                hasMoreData: true, //是否分页加载
                showPicker: false,
                curr: 0,
                array: ['全部产品', '甄选系列', '优选系列', '惠选系列', '易选系列'],
                list: [],
                searchParams: {
                    product_status: 1,
                    product_type: '',
                    product_name: '',
                    product_series: '',
                    create_time_sort: 'desc',
                    page: 1,
                    limit: 20,
                    product_id: ''
                },
                filterlist: [{
                        name: '全部产品',
                        ishow: true
                    },
                    {
                        name: '综合排序',
                        ishow: true
                    },
                ]
            };
        },
        onLoad() {
            //从系统匹配方案页面携带过来的参数
            if (getApp().globalData.product_id) {
                this.searchParams.product_id = getApp().globalData.product_id || '';
            }
            this.getData();
        },
        methods: {
            handleSelect(item, index) {
                if (index == 0) {
                    //全部产品
                    this.showPicker = item.ishow ? true : false;
                    this.open();
                } else if (index == 1) {
                    //综合排序
                    this.searchParams.create_time_sort = item.ishow ? 'asc' : 'desc';
                    this.list = [];
                    this.searchParams.page = 1;
                    this.getData();
                }
            },
            handleInput: debounce(function(e) {
                this.list = [];
                this.searchParams.page = 1;
                this.getData();
            }, 500),
            /**
             * 下拉滚动事件监听
             * @param {Object} e
             */
            lower(e) {
                if (!this.hasMoreData) {
                    return;
                }
                this.searchParams.page++;
                this.getData();
            },
            /**
             * 筛选产品
             * @param {Object} index
             */
            tab(index) {
                this.curr = index;
                const productTypes = [
                    { series: '', name: '全部产品' },
                    { series: 1, name: '甄选系列' },
                    { series: 2, name: '优选系列' },
                    { series: 3, name: '惠选系列' },
                    { series: 4, name: '易选系列' }
                ];
                if (index >= 0 && index < productTypes.length) {
                    const { series, name } = productTypes[index];
                    this.searchParams.product_series = series;
                    this.$set(this.filterlist, 0, { ...this.filterlist[0], name });
                }
                this.resetChange();
                this.close();
                this.getData();
            },
            open() {
                this.$refs.popup.open('top');
            },
            close() {
                this.$refs.popup.close();
            },
            getData() {
                this.request(API.productList, 'GET', this.searchParams, true).then(res => {
                    if (res.code === 0) {
                        const newList = res.data.list;
                        if (newList.length > 0) {
                            this.hasMoreData = true;
                            this.list = [...this.list, ...newList.map(item => {
                                const commissionPercentage = Number(item.king_commission) / 100;
                                return {
                                    ...item,
                                    product_advantages: item.product_advantages.slice(0, 3),
                                    earn: Math.round(Number(item.product_quota) * commissionPercentage),
                                    product_quota: parseFloat((Number(item.product_quota) / 10000).toFixed(2)),
                                    total_lending_amount: Number(item.total_lending_amount) / 10000
                                };
                            })];
                        } else {
                            this.hasMoreData = false;
                        }
                    } else {
                        uni.showToast({
                            title: res.msg,
                            icon: 'none'
                        });
                    }
                });
            },
            /**
             * 立即进件
             */
            enterImmediately(id) {
                uni.navigateTo({
                    url: '/pages/product/shareProduct?id=' + id
                })
            },
            /**
             * 重置数据
             */
            resetChange() {
                this.list = [];
                this.searchParams.page = 1;
            }
        }
    };
</script>

<style scoped lang="scss">
    @import '@/assets/css/product/index.scss';
</style>